import { SearchOutlined } from '@ant-design/icons';
import { Button, Input, Space, Table, Modal } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { useSelector, useDispatch } from "react-redux";
import { setItemInfoVisible } from '../../store/slice/itemInfoSlice';

export default function Detail() {
    const [searchText, setSearchText] = useState('');
    const [searchedColumn, setSearchedColumn] = useState('');
    const searchInput = useRef(null);
    const dispatch = useDispatch();
    const { itemInfo, itemInfoVisible } = useSelector((state => state.itemInfo));

    const handleSearch = (selectedKeys, confirm, dataIndex) => {
        confirm();
        setSearchText(selectedKeys[0]);
        setSearchedColumn(dataIndex);
    };

    const handleReset = (clearFilters) => {
        clearFilters();
        setSearchText('');
    };

    const getColumnSearchProps = (dataIndex) => ({
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
            <div
                style={{
                    padding: 8,
                }}
            >
                <Input
                    ref={searchInput}
                    placeholder={`Search ${dataIndex}`}
                    value={selectedKeys[0]}
                    onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
                    onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
                    style={{
                        marginBottom: 8,
                        display: 'block',
                    }}
                />
                <Space>
                    <Button
                        type="primary"
                        onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
                        icon={<SearchOutlined />}
                        size="small"
                        style={{
                            width: 90,
                        }}
                    >
                        Search
                    </Button>
                    <Button
                        onClick={() => clearFilters && handleReset(clearFilters)}
                        size="small"
                        style={{
                            width: 90,
                        }}
                    >
                        Reset
                    </Button>
                    <Button
                        type="link"
                        size="small"
                        onClick={() => {
                            confirm({
                                closeDropdown: false,
                            });
                            setSearchText(selectedKeys[0]);
                            setSearchedColumn(dataIndex);
                        }}
                    >
                        Filter
                    </Button>
                </Space>
            </div>
        ),
        filterIcon: (filtered) => (
            <SearchOutlined
                style={{
                    color: filtered ? '#1890ff' : undefined,
                }}
            />
        ),
        onFilter: (value, record) =>
            record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
        onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
                setTimeout(() => searchInput.current?.select(), 100);
            }
        },
        render: (text) => text
    });

    let columns = [
        {
            title: "商品名 ",
            dataIndex: "name",
            key: "name",
            ellipsis: true,
            ...getColumnSearchProps("name")
        },
        {
            title: "商品类型",
            dataIndex: "types",
            key: "types",
            ...getColumnSearchProps("types")
        },
        {
            title: "品牌",
            dataIndex: "brand",
            key: "brand",
            ...getColumnSearchProps("brand")
        },
        {
            title: "颜色",
            dataIndex: "color",
            key: "color",
            ...getColumnSearchProps("color")
        },
        {
            title: "款式",
            dataIndex: "fit",
            key: "fit",
            ...getColumnSearchProps("types")
        },
        {
            title: "尺码",
            dataIndex: "size",
            key: "size"
        },
        {
            title: "运费" + "¥",
            dataIndex: "freight",
            key: "freight"
        },
        {
            title: "单价" + "¥",
            dataIndex: "price",
            key: "price"
        },
        {
            title: "数量",
            dataIndex: "count",
            key: "count"
        },
        {
            title: "合计" + "¥",
            key: "totalPrice",
            render: (text, record) => (
                <span>{record.price * record.count}</span>
            )
        }
    ]

    return (
        <>
            <Modal
                title="订单商品信息"
                visible={itemInfoVisible}
                onOk={() => { dispatch(setItemInfoVisible(false)) }}
                onCancel={() => { dispatch(setItemInfoVisible(false)) }}
                width="80%"
            >
                <Table columns={columns} dataSource={itemInfo}></Table>
            </Modal>
        </>
    )
}
